<template>
  <m-layout>
    <div slot="header">
      <mt-header  title="班级学员" >
        <m-header-back slot="left"/>
      </mt-header>
      <div class="search">
        <mt-search v-model="searchVal" @input="search" placeholder="搜索内容"></mt-search>
      </div>
    </div>
    <div slot="body" class="student">
      <m-section :border-top="false">
        <div class="stdBox" v-if="studentArr.length">
          <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true"
          >
            <li v-for="(item,index) in studentArr" :key="index" class="item" @click="goNext(item)">
            <p class="info">
              <img :src="item.headPicture || '/static/images/default/avatar.png'" alt="">
              <span class="name">{{item.name}}</span>
            </p>
            <span class="status">已点评{{item.commentCount}}课时 <i class="iconfont">&#xe65e;</i></span>
            </li>
          </ul>
        </div>
        <e-placeholder text="暂无学员" v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/reviews'
import _ from 'lodash/core'
export default {
  computed: {
  },
  data () {
    return {
      beginTime: '',
      endTime: '',
      searchVal: '',
      teacherId: '',
      classScheduleId: '',
      studentArr: [],
      total: '',
      rows: 15,
      page: 1,
      loading: false
    }
  },
  filters: {
    formatStatus (val) {
      let status = {
        0: '已点评',
        1: '未点评',
        2: '未开课',
        3: '学员请假',
        4: '学员缺勤'
      }
      return status[val]
    }
  },
  methods: {
    search () {
      _.throttle(this.studentSchedule(), 200)
    },
    // 下拉刷新
    loadMore () {
      if (this.studentArr.length >= this.total) {
        this.loading = true
        return false
      }
      this.studentSchedule()
    },
    studentSchedule () {
      api.studentSchedule({
        teacherId: this.teacherId,
        classScheduleId: this.classScheduleId,
        search: this.searchVal,
        beginTime: this.beginTime,
        endTime: this.endTime,
        page: this.page,
        rows: this.rows
      }).then((res) => {
        this.studentArr.push(...res.data.list)
        this.total = res.data.total
        this.page += 1
      }).catch(() => {})
    },
    goNext (item) {
      window.sessionStorage.setItem('student', JSON.stringify(item))
      this.$router.push({path: '/reviews/lesson', query: {classId: item.classId, courseId: item.courseId, studentId: item.studentId}})
    }
  },
  mounted () {
    let arg = this.$route.query
    this.beginTime = arg.beginTime
    this.endTime = arg.endTime
    this.teacherId = arg.teacherId
    this.classScheduleId = arg.classScheduleId
    this.studentSchedule()
  }
}
</script>

<style lang="scss" scoped>
  .student{
    position: relative;
    .search{
      overflow: hidden;
      .mint-search{
        height: auto;
      }
    }
    .item {
      position: relative;
      overflow: hidden;
      padding: 0.2rem;
      &:after{
          content: " ";
          border-bottom: 1px solid $border-color-base;
          display: block;
          height:0;
          width:100%;
          position: absolute;
          left: 0;
          bottom:0;
          transform: scaleY(0.5);
        }
      .info{
        margin: 0;
        overflow: hidden;
        .name{
          vertical-align: middle;
          line-height: 0.8rem;
          display: inline-block;
        }
        img{
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
          float: left;
        }
      }
      .status{
        position: absolute;
        right: 0.16rem;
        top: 0.42rem;
        color: $color-sub;
        font-size: $font-size-small;
      }
    }
  }
</style>
